<template>
  <div class="myInfo">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      left-text="我的"
      :border="false"
      @click-left="$router.back()"
    />
    <div
      class="userLoginImg"
      @click="$router.push(`/my/identCheck/login?type=login`)"
    >
      <img :src="userInfo.photo" v-imagerror="require('@/assets/mobile.png')" />
      <span class="text">{{ userInfo.name || "点击登录" }}</span>
    </div>
    <van-tabbar v-if="user" class="userDetail" :border="false" v-model="active">
      <van-tabbar-item
        name="userInfo"
        icon="bars"
        :to="`/user/profile/${userInfo.id}`"
        >个人资料</van-tabbar-item
      >
      <van-tabbar-item name="follow" icon="contact" to="/check"
        >我的关注</van-tabbar-item
      >
      <van-tabbar-item name="comment" icon="chat-o">我的评价</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends" to="/family"
        >已联系家政员</van-tabbar-item
      >
    </van-tabbar>
    <div class="main">
      <van-cell-group v-if="user" class="notes">
        <van-cell icon="records" title="家政服务记录" is-link />
        <van-cell icon="orders-o" title="家政求职记录" is-link to="/employment-record"/>
      </van-cell-group>
      <van-cell-group>
        <van-cell
          @click="identCheck"
          icon="passed"
          title="身份认证通道"
          is-link
        />
        <van-cell icon="info-o" title="关于我们" is-link to="/about" />
      </van-cell-group>
      <van-button v-if="user" class="logout" type="info" block @click="logout"
        >退出登录</van-button
      >
    </div>
    <!-- 身份认证弹层 -->
    <van-popup
      class="identCheck"
      v-model="showIdent"
      position="bottom"
      :style="{ height: '14%' }"
    >
      <van-cell
        value="家服人员授权认证"
        class="employee"
        :to="`/my/identCheck/${userInfo.id}?type=persone`"
      />
      <van-cell
        value="家服公司管理员授权认证"
        class="manager"
        :to="`/my/identCheck/${userInfo.id}?type=manager`"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserInfo } from "@/api/ident";

export default {
  data() {
    return {
      userInfo: {},
      active: "friends",
      showIdent: false
    };
  },
  created() {
    if (this.user) {
      this.loadUserInfo();
    }
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    identCheck() {
      this.showIdent = true;
    },
    async loadUserInfo() {
      try {
        const {
          data: { data }
        } = await getUserInfo();
        this.userInfo = data;
      } catch (err) {
        this.$toast("获取数据失败, 请稍后重试");
      }
    },
    logout() {
      this.$dialog
        .confirm({
          title: "确认退出吗? "
        })
        .then(() => {
          this.$store.commit("setUser", null);
          this.userInfo = {};
        })
        .catch(() => {
          console.log("取消退出");
        });
    }
  }
};
</script>

<style scoped lang="scss">
.myInfo {
  ::v-deep.page-nav-bar {
    font-size: 16px;
    flex-direction: column;
    background-color: #3f51b5;
    .van-nav-bar__left {
      font-size: 32px;
    }
    .van-nav-bar__text {
      color: #fff;
    }
  }
  .userLoginImg {
    height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #3f51b5;
    img {
      width: 136px;
      height: 136px;
      border-radius: 50%;
    }
    .text {
      font-size: 28px;
      margin-top: 34px;
      color: #fff;
    }
  }
  .userDetail {
    margin-left: 5vw;
    top: 28vh;
    width: 90%;
    height: 162px;
    border-radius: 10px;
    .van-tabbar-item {
      border-radius: 7px;
    }
  }
  .main {
    height: 48vh;
    overflow-y: auto;
    padding-top: 140px;
    background-color: #f8f8f8;
    .notes {
      margin-bottom: 12px;
    }
    .van-cell-group {
      background-color: #fff;
      .van-cell__left-icon {
        margin-right: 20px;
      }
    }
  }
}
.logout{
  border: none;
  color: #fff;
  background-color: #3f51b5;
}
.employee,
.manager {
  font-size: 28px;
  .van-cell__value--alone {
    text-align: center;
  }
}
.employee {
  border-bottom: 13px solid #ebedf0;
}
</style>
